@backgroundColor: #fff;
@textColor5: #fff;
@borderLineColor: #f2f3f5;
@textColor: #323233;

.o-dialog {
  position: absolute;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, .3);
  border-radius: 5px;
  background: @backgroundColor;
  overflow: hidden;
  transition: all .3s;
  top: 20vh;
  min-width: 400px;
  @apply lg:w-1/3 md:w-1/3 xl:w-1/3 sm:w-full;

  .o-dialog-close {
    display: flex;
    position: absolute;
    right: 10px;
    top: 10px;
    height: 20px;
    width: 20px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;

    &:hover {
      opacity: .8;
    }
  }

  .o-ialog-header {
    overflow: hidden;
    font-size: 16px;
    padding-left: 15px;
    position: relative;
    border-bottom: 1px solid @borderLineColor;
    color: @textColor;
    border-radius: 5px 5px 0 0;
    -webkit-user-select: none;
    height: 44px;
    line-height: 44px;

    &.move {
      cursor: move;
    }
  }

  .o-dialog-content {
    @apply w-full;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    transition: all .3s;
  }

  .o-dialog-footer {
    text-align: right;
    padding: 10px 20px 20px;
  }

  .o-dialog-auto-close {
    position: absolute;
    left: 10px;
    top: 45px;
  }

  .o-dialog-alert {
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      margin-right: 5px;
    }

    // 其他的需要再定义样式
    // success
    .icon-success {
      &:before {
        color: green;
      }
    }

    //failure
    .icon-failure {
      &:before {
        color: red;
      }
    }

    //warning
    .icon-tips {
      &:before {
        color: orange;
      }
    }
  }

  // msg类弹窗
  &.dialog-msg {
    top: 8px;

    .o-dialog-content {
      padding: 8px;

      i {
        font-size: 16px;
      }
    }
  }
}

.o-dialog-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  background: rgba(55, 55, 55, .6);

  &.modal {
    background: none;
  }

  &.center {
    align-items: center;

    .o-dialog {
      top: auto;
    }
  }
}

.o-dialog-isAlert {
  // message类的自动关闭不显示
  min-width: 200px;

  .o-dialog-auto-close {
    display: none;
  }
}

// 遮罩层固定动画，这写法会影响到其他的动画
/*[class*="-enter-active"]{
  animation: modal-fade-in .3s;
}
[class*="-leave-active"]{
  animation: modal-fade-out 0.3s;
}*/
.enterActive() {
  animation: modal-fade-in .3s !important;
}

.leaveActive() {
  animation: modal-fade-out 0.3s;
}

.fade-enter-active {
  // animation: modal-fade-in .3s !important;
  .enterActive();

  .o-dialog {
    animation: dialog-fade-in .3s;
  }
}

.fade-leave-active {
  // animation: modal-fade-out 0.3s;
  .leaveActive();

  .o-dialog {
    animation: dialog-fade-out 0.3s;
  }
}

@keyframes dialog-fade-in {
  0% {
    transform: translate(0, -20px);
    opacity: 0;
  }
}

@keyframes dialog-fade-out {
  100% {
    transform: translate(0, -20px);
    opacity: 0;
  }
}

@keyframes modal-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    // transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes modal-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

// 放大
.zoom-enter-active {
  // animation: modal-fade-in .3s !important;
  .enterActive();

  .o-dialog {
    animation: dialog-zoom-in .3s;
  }
}

.zoom-leave-active {
  // animation: modal-fade-out 0.3s;
  .leaveActive();

  .o-dialog {
    animation: dialog-zoom-out 0.3s;
  }
}

@keyframes dialog-zoom-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dialog-zoom-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

// 抽屉
.slide-enter-active {
  .enterActive();

  .o-drawer-top {
    animation: dialog-slide-top-in 0.3s;
  }

  .o-drawer-bottom {
    animation: dialog-slide-bottom-in 0.3s;
  }

  .o-drawer-left {
    animation: dialog-slide-left-in 0.3s;
  }

  .o-drawer-right {
    animation: dialog-slide-right-in 0.3s;
  }
}

.slide-leave-active {
 .leaveActive();

  .o-drawer-top {
    animation: dialog-slide-top-out 0.3s;
  }

  .o-drawer-bottom {
    animation: dialog-slide-bottom-out 0.3s;
  }

  .o-drawer-left {
    animation: dialog-slide-left-out 0.3s;
  }

  .o-drawer-right {
    animation: dialog-slide-right-out 0.3s;
  }
}

@keyframes dialog-slide-top-in {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes dialog-slide-top-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes dialog-slide-bottom-in {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes dialog-slide-bottom-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes dialog-slide-left-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dialog-slide-left-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes dialog-slide-right-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dialog-slide-right-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}